<template>
  <div class="bodybigbox">
    <div class="caimg">
      <img src="../../../../public/wkcimg/images/1 (2).jpg" alt="" />
    </div>
    <div class="text">点击查看账单.分期.还款</div>
    <ul class="list">
      <li @click="gofuwu()">
        <img src="../../../../public/wkcimg/images/numone_03.jpg" />
        <br>
        <p>卡服务</p>
      </li>
      <li @click="goyouhui()">
        <img src="../../../../public/wkcimg/images/numone_05.jpg" />
      <br>
        <p>卡优惠</p>
      </li>
      <li><img src="../../../../public/wkcimg/images/numone_07.jpg" />
      <br>
        <p>信用卡包</p>
      </li>
      <li><img src="../../../../public/wkcimg/images/numone_09.jpg" />
      <br>
        <p>卡权益</p>
      </li>
    </ul>
    <div class="slideshow">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(v,i) in newimgurla" :key="i"><img :src="v.imgurl" alt=""></van-swipe-item>
    </van-swipe>
   
  </div>
  <div class="xiaotoubu">
    <div class="d1">我要办卡</div>
    <div class="d2">更多</div>
  </div>
  <ul class="yinhangimg">
    <li v-for="(v,i) in yinhangdata" :key="i">
        <img :src="v.imgurl" alt="">
        <p class="p1">{{v.title1}}</p>
        <p class="p2">{{v.title2}}</p>
        <!-- <img src="../../../../public/wkcimg/images/1 (3).jpg" alt=""> -->
    </li>
  </ul>
  <div class="longka">
    龙卡汽车卡
  </div>
  <div class="longkashang">
    <img src="../../../../public/wkcimg/images/1 (6).jpg" alt="">
  </div>
  <ul class="longkaxia">
    <li>
      <img src="../../../../public/wkcimg/images/1 (7).jpg" alt="">
    </li>
    <li>
      <img src="../../../../public/wkcimg/images/1 (8).jpg" alt="">
    </li>
    <li>
      <img src="../../../../public/wkcimg/images/1 (9).jpg" alt="">
    </li>
  </ul>
<div class="xiaotoubu">
    <div class="d1">热门活动</div>
    <div class="d2">更多</div>
  </div>
  <ul class="huodong">
    <li>
      <p class="pp">全球支付万事达卡</p>
      <img src="../../../../public/wkcimg/images/1 (10).jpg" alt="">
    </li>
    <li>
       <p>龙卡信用卡</p>
      <img src="../../../../public/wkcimg/images/1 (11).jpg" alt="">
    </li>
    <li>
      <p>龙卡信用卡</p>
      <img src="../../../../public/wkcimg/images/1 (12).jpg" alt="">
    </li>
  </ul>
  <div class="longka">
    分期生活
  </div>
  <ul class="huodong">
    <li>
      
      <img src="../../../../public/wkcimg/images/1 (13).jpg" alt="">
      <p>装修分期</p>
    </li>
    <li>
       
      <img src="../../../../public/wkcimg/images/1 (14).jpg" alt="">
      <p>消费分期</p>
    </li>
    <li>
      
      <img src="../../../../public/wkcimg/images/1 (15).jpg" alt="">
      <p>现金分期</p>
    </li>
  </ul>
<div class="longka">
    随付贷分期
  </div>

<ul class="huodong">
    <li>
      <p>苹果分期</p>
      <p class="smallp">最高24期0手续费</p>
      <img src="../../../../public/wkcimg/images/1 (16).jpg" alt="">
    </li>
    <li>
       <p>拼多多分期</p>
       <p class="smallp">最高减216元</p>
      <img src="../../../../public/wkcimg/images/1 (17).jpg" alt="">
    </li>
    <li>
      <p>随付贷分期</p>
      <p class="smallp">最高24期0手续费</p>
      <img src="../../../../public/wkcimg/images/1 (18).jpg" alt="">
    </li>
  </ul>
  <div class="xiaotoubu">
    <div class="d1">境外专享</div>
    <div class="d2">更多</div>
  </div>
  <div class="longkashang">
    <img src="../../../../public/wkcimg/images/1 (19).jpg" alt="">
  </div>

  <ul class="huodong">
    <li>
      <p>玩转世界</p>
      <p class="smallp">Vsh卡享8%返现</p>
      <img src="../../../../public/wkcimg/images/1 (20).jpg" alt="">
    </li>
    <li>
       <p>境外精选商户</p>
       <p class="smallp">最高享20%返现</p>
      <img src="../../../../public/wkcimg/images/1 (21).jpg" alt="">
    </li>
    <li>
      <p>热购全球</p>
      <p class="smallp">境外一站式优惠集锦</p>
      <img src="../../../../public/wkcimg/images/1 (22).jpg" alt="">
    </li>
  </ul>

  <div class="xiaotoubu">
    <div class="d1">增值礼遇</div>
    <div class="d2">更多</div>
  </div>
  <ul class="twoimg">
    <li> <img src="../../../../public/wkcimg/images/1 (23).jpg" alt=""></li>
    <li> <img src="../../../../public/wkcimg/images/1 (24).jpg" alt=""></li>
  </ul>
  <ul class="huodong">
    <li>
      
      <img src="../../../../public/wkcimg/images/1 (25).jpg" alt="">
      <p class="centerp">布朗熊抱枕</p>
    </li>
    <li>
       
      <img src="../../../../public/wkcimg/images/1 (26).jpg" alt="">
      <p class="centerp">刀刀狗棉拖</p>
    </li>
    <li>
      
      <img src="../../../../public/wkcimg/images/1 (27).jpg" alt="">
      <p class="centerp">刀刀狗抱枕</p>
    </li>
  </ul>
<div class="longka">
    数字信用卡
  </div>

  <div class="longkashang">
    <img src="../../../../public/wkcimg/images/1 (28).jpg" alt="">
  </div>
  <ul class="longkaxia">
    <li>
      <img src="../../../../public/wkcimg/images/1 (29).jpg" alt="">
    </li>
    <li>
      <img src="../../../../public/wkcimg/images/1 (30).jpg" alt="">
    </li>
    <li>
      <img src="../../../../public/wkcimg/images/1 (31).jpg" alt="">
    </li>
  </ul>

  <div class="slideshow">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(v,i) in newimgurlb" :key="i"><img :src="v.imgurl" alt=""></van-swipe-item>
    </van-swipe>
   
  </div>

<div class="xiaotoubu">
    <div class="d1">积分商城</div>
    <div class="d2">更多</div>
  </div>

  <ul class="twoimg">
    <li> <img src="../../../../public/wkcimg/images/1 (33).jpg" alt=""></li>
    <li> <img src="../../../../public/wkcimg/images/1 (34).jpg" alt=""></li>
  </ul>

<div class="xiaotoubu">
    <div class="d1">精选特惠</div>
    <div class="d2">更多</div>
  </div>
  <div class="flex">
    <div class="xiaobox" v-for="(v,i) in newimgurlc" :key="i">
      <img :src="v.imgurl" alt="">
    </div>
  </div>
  </div>
</template>

<script>
import link from "@/api/link.js"
export default {
    data(){
        return{
            yinhangdata:{},
            slideshowb:{},
            slideshowc:{}
        }
    },
    mounted(){
        this.$store.dispatch("SLIDESHOW")
        
        link("/user/wkc/yinhangdata","get").then((ok)=>{
            this.yinhangdata=ok.data.yinhangdata
            
        })


        link("/user/wkc/slideshow").then((ok)=>{
          // console.log(ok)
          this.slideshowb=ok.data.slideshowb
          
        })

        link("/user/wkc/slideshow").then((ok)=>{
          // console.log(ok)
          this.slideshowc=ok.data.slideshowb
          
        })

    },
    methods:{
      gofuwu(){
        this.$router.push("/iconhome")
      },
       goyouhui(){
        this.$router.push("/youhuiview")
      }
    },
    computed:
    {
        newimgurla(){
          //  console.log(this.$store.state.card.imgurl.slideshow)
           return this.$store.state.card.imgurl.slideshow    
        },
        newimgurlb(){
           return this.slideshowb
        },
       newimgurlc(){
         return this.slideshowc
       }
    }

};
</script>

<style scoped lang="scss">
.bodybigbox {
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: 0.4rem;
  
  .caimg {
    width: 90%;
    height: 1.28rem;
    margin: auto;
    border-radius: 0.1rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.1rem;
    }
  }
  .text {
    width: 80%;
    height: 0.5rem;
    border: 0.03rem solid rgba(94, 93, 93, 0.177);
    margin: auto;
    font-size: 0.18rem;
    border-radius: 0.06rem;
    position: absolute;
    top: 1rem;
    left: 0.35rem;
    background-color: white;
    text-align: center;
    line-height: 0.5rem;
    color: #003b99;
  }
  .list {
    width: 90%;
    height: 0.82rem;
    background-color: white;
    margin: 0.4rem auto 0.1rem;
    display: flex;
    li {
      width: 25%;
      height: 100%;
      text-align: center;
      font-size: 0.14rem;
      img {
        width: 50%;
        height: 50%;
        vertical-align: top;
      }
      p{
        margin-top: 0.1rem;
      }
    }
  }
  .slideshow {
    width: 90%;
    margin: 0.1rem auto;
   
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 0.8rem;
    text-align: center;
    background-color: #39a9ed;
    height: 0.8rem;
    border-radius: 0.04rem;
    img{
        width: 100%;
        height: 100%;
    }
  }
}
.xiaotoubu{
    width: 90%;
    margin: 0.1rem auto;
    height: 0.3rem;
    display: flex;
    justify-content: space-between;
    
    .d1{
        height: 100%;
        font-size: 0.18rem;
        line-height: 0.3rem;
        font-weight: 700;
    }
     .d2{
        height: 100%;
        font-size: 0.14rem;
        line-height: 0.3rem;
    }
}
.yinhangimg{
    width: 90%;
    margin: auto;
    height: 1.2rem;
    display: flex;
    justify-content: space-around;
    li{
        width: 32%;
        background-color: white;
        font-size: 0;
        img{
            width: 100%;
            vertical-align: top;

        }
        .p1{
            font-size: 0.13rem;
            font-weight: 700;
        }
        .p2{
            font-size: 0.1rem;
            color: gray;
        }
    }
}
.longka{
    width: 90%;
    margin: 0.1rem auto;
    height: 0.3rem;
    font-size: 0.18rem;
    font-weight: 700;
    line-height: 0.3rem;
}
.longkashang{
  width: 90%;
  margin: auto;
  height: 0.86rem;
  img{
    width: 100%;
    height: 100%;
  }
}
.longkaxia{
  width: 90%;
  margin: auto;
  height: 1.16rem;
  display: flex;
  justify-content: space-around;
  margin-top: 0.1rem;
  li{
    width: 32%;
    height: 100%;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.huodong{
  width: 90%;
  margin: auto;
  height: 1.16rem;
  display: flex;
  justify-content: space-around;
  margin-top: 0.1rem;
  li{
    width: 32%;
    height: 100%;
    font-size: 0;
    .pp{
      font-size: 0.13rem;
    }
    p{
      font-size: 0.16rem;
      font-weight: 700;
    }
    img{
      width: 100%;
      height: 70%;
    }
    .smallp{
      font-size: 0.08rem;
      color: gray;
    }
    .centerp{
      display: block;
      margin: auto;
      text-align: center;
    }
  }
}
.twoimg{
  width: 90%;
  margin: auto;
  height: 1.2rem;
  display: flex;
  justify-content: space-around;
  li{
    width: 48%;
    height: 100%;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.flex{
  width: 90%;
  margin: auto;
  height: 1.58rem;
  display: flex;
  overflow-x: auto;
  margin-bottom: 0.8rem;
  .xiaobox{
    width: 2.86rem;
    height: 100%;
    flex-shrink: 0;
    margin-right: 0.1rem;
    border-radius: 0.06rem;
    img{
      width: 100%;
      height: 100%;
      border-radius: 0.06rem;
    }
  }
}
}
</style>